<template>
  <u-popup :show="isshow" custom-style="border-radius:20rpx 20rpx 0 0" @close="handleClose" position="bottom">
    <view class="uiSelect">
      <view class="us-header">
        <view class="us-btn b2" @tap="onCancel">取消</view>
        <view class="us-btn b1" @tap="onConfirm">确定</view>
      </view>
      <view class="us-search" v-if="search == 1">
        <u-search placeholder="请输入企业名称" v-model="searchText" :showAction="false" />
      </view>
      <view class="us-picker">
        <picker-view style="height: 300px" @change="onChange" :immediate-change="true" :value="selectIndex">
          <picker-view-column>
            <view class="us-picker-item" v-for="(item, index) in columns" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </u-popup>
</template>
<script>
import { ref } from 'vue'
import debounce from 'lodash/debounce'
export default {
  props: ['value'],
  data() {
    return {
      selectValue: '',
      searchText: '',
      isshow: false,
      list: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
      columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
      search: 0,
      selectIndex: [0]
    }
  },
  watch: {
    searchText(s) {
      this._handleSearch(s)
    }
  },
  methods: {
    handleSearch() {
      return debounce((s) => {
        let columns = []
        if (s) {
          columns = this.list.filter((res) => res.indexOf(s) > -1)
        } else {
          columns = this.list
        }

        let c = this.$refs['c-columns']
        if (columns.length == 0) {
          this.selectValue = ''
          columns = ['未找到企业']
        } else {
          this.selectValue = columns[0]
        }

        this.columns = columns
      }, 100)
    },
    handleClose() {},
    hide() {
      this.isshow = false
    },
    show(options) {
      this.search = options.search || 0
      this.isshow = true
      console.log(this.tempSelectIndex)
      this.selectIndex = [this.tempSelectIndex || 0]
    },
    onCancel() {
      this.hide()
    },
    onChange(e) {
      this.tempSelectIndex = e.detail.value[0]
    },
    onConfirm() {
      if (this.selectValue) {
        this.value.name = this.list[this.tempSelectIndex]
        this.hide()
      } else {
        uni.showToast({
          title: `请选择企业`,
          icon: 'none'
        })
      }
    }
  },
  mounted() {
    console.log(this.value)
    console.log(this.isshow)
    this.selectValue = this.columns[0]
    this._handleSearch = this.handleSearch()
  }
}
</script>
